<template>
  <div class="factory-cust-chart factory-line" :index="grpFlter.index">
    <el-dropdown v-if="editable">
      <i class="el-icon-more"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" @click.native="$emit('editChart')">
          编辑
        </el-dropdown-item>
        <el-dropdown-item icon="el-icon-close" @click.native="$emit('deleteChart')">
          删除
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <p class="line-title">
      <template v-if="grpFlter.isCompare">
        <el-col :span="12">{{ grpFlter.mainGrp.groupName }}</el-col>
        <el-col :span="12">对比画像</el-col>
      </template>
      <template v-else>{{ grpFlter.mainGrp.groupName }}</template>
    </p>
    <el-row :gutter="50" v-if="grpFlter.isCompare">
      <el-col :span="12">
        <template v-if="!wrong">
          <div
            class="line-content"
            :id="`factory-profile-${grpFlter.mainGrp.labId}-#${grpFlter.index}`"
            v-if="showList"
          ></div>
          <div class="line-content no-record" v-else>
            <img src="~@/assets/img/no_profile.png" /> <br />
            暂无结果
          </div>
        </template>
        <div class="line-content" v-else>
          <div class="no-record" v-if="!loading">
            <img src="~@/assets/img/no_records.png" /> <br />
            计算出错
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <template v-if="!compare.wrong">
          <div
            class="line-content"
            :id="`factory-profile-compare-${grpFlter.mainGrp.labId}-#${grpFlter.index}`"
            v-if="compare.showList"
          ></div>
          <div class="line-content no-record" v-else>
            <img src="~@/assets/img/no_profile.png" /> <br />
            暂无结果
          </div>
        </template>
        <div class="line-content" v-else>
          <div class="no-record" v-if="!loading">
            <img src="~@/assets/img/no_records.png" /> <br />
            计算出错
          </div>
        </div>
      </el-col>
    </el-row>
    <template v-else>
      <template v-if="!wrong">
        <div
          class="line-content"
          :id="`factory-profile-${grpFlter.mainGrp.labId}-#${grpFlter.index}`"
          v-if="showList"
        ></div>
        <div class="line-content no-record" v-else>
          <img src="~@/assets/img/no_profile.png" /> <br />
          暂无结果
        </div>
      </template>
      <div class="line-content" v-else>
        <div class="no-record" v-if="!loading">
          <img src="~@/assets/img/no_records.png" /> <br />
          计算出错
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    grpFlter: {
      type: Object,
      required: true,
      default: () => {}
    },
    loading: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      lineChart: null,
      wrong: false,
      list: [],
      showList: true,
      compare: {
        lineChart: null,
        wrong: false,
        list: [],
        showList: true
      }
    }
  },
  methods: {
    refreshChart(data = {}) {
      this.wrong = !!data.wrong
      this.list = data.labGrps || []
      let showList = data.labGrps && data.labGrps.length > 0
      if (this.list.length) {
        let flag = false
        this.list.forEach(item => {
          if (item.value > 0) flag = true
        })
        showList = flag
      }
      this.showList = showList
      if (showList) {
        this.$nextTick(() => {
          this.lineChart = echarts.init(
            document.getElementById(`factory-profile-${this.grpFlter.mainGrp.labId}-#${this.grpFlter.index}`)
          )
          let lineData = []
          data.labGrps.forEach(item => {
            if (data.groupTyp !== 'enum' || (data.groupTyp === 'enum' && item.value !== 0)) {
              lineData.push({
                name: item.desc || item.code,
                value: item.value
              })
            }
          })
          let option = {
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>数值：{c}<br/>占比：{d}%'
            },
            series: [
              {
                type: 'line',
                radius: '70%',
                top: '20%',
                data: lineData,
                label: {
                  normal: {
                    position: lineData.length >= 30 ? 'inner' : 'outter',
                    color: '#666'
                  }
                },
                labelLine: {
                  lineStyle: {
                    color: '#666'
                  }
                },
                itemStyle: {
                  color(params) {
                    // let colorList = ['#475fba', '#8bb4ff', '#ffab34', '#ffdc75', '#baaaf5', '#9983ea']
                    let colorList = ['#0f80ff', '#11ce98', '#f79e2a', '#7886c5', '#e8d318', '#4dad30', '#f3b177']
                    let r = Math.floor(Math.random() * 256)
                    let g = Math.floor(Math.random() * 256)
                    let b = Math.floor(Math.random() * 256)
                    return params.dataIndex > colorList.length - 1
                      ? 'rgb(' + r + ',' + g + ',' + b + ')'
                      : colorList[params.dataIndex]
                  }
                }
              }
            ],
            label: {
              formatter: function(params) {
                let label = params.name
                if (params.name.length >= 20) {
                  label = params.name.split('~')[0] + '~ \n ' + params.name.split('~')[1]
                }
                return label
              }
            }
          }
          this.lineChart.setOption(option, true)
          window.addEventListener('resize', () => {
            this.lineChart.resize()
          })
        })
      } else {
        if (this.lineChart) {
          this.lineChart.dispose()
          this.lineChart = null
        }
      }
    },
    refreshCompareChart(data = {}) {
      this.compare.wrong = !!data.wrong
      this.compare.list = data.labGrps || []
      let showList = data.labGrps && data.labGrps.length > 0
      if (this.compare.list.length) {
        let flag = false
        this.compare.list.forEach(item => {
          if (item.value > 0) flag = true
        })
        showList = flag
      }
      this.compare.showList = showList
      if (showList) {
        this.$nextTick(() => {
          this.compare.lineChart = echarts.init(
            document.getElementById(`factory-profile-compare-${this.grpFlter.mainGrp.labId}-#${this.grpFlter.index}`)
          )
          let lineData = []
          data.labGrps.forEach(item => {
            lineData.push({
              name: item.desc || item.code,
              value: item.value
            })
          })
          let option = {
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>数值：{c}<br/>占比：{d}%'
            },
            series: [
              {
                type: 'line',
                radius: '70%',
                data: lineData,
                label: {
                  normal: {
                    position: lineData.length >= 30 ? 'inner' : 'outter',
                    color: '#666'
                  }
                },
                labelLine: {
                  lineStyle: {
                    color: '#666'
                  }
                },
                itemStyle: {
                  color(params) {
                    const colorList = ['#0f80ff', '#11ce98', '#f79e2a', '#7886c5', '#e8d318', '#4dad30', '#f3b177']
                    let r = Math.floor(Math.random() * 256)
                    let g = Math.floor(Math.random() * 256)
                    let b = Math.floor(Math.random() * 256)
                    return params.dataIndex > colorList.length - 1
                      ? 'rgb(' + r + ',' + g + ',' + b + ')'
                      : colorList[params.dataIndex]
                  }
                }
              }
            ],
            label: {
              formatter: function(params) {
                let label = params.name
                if (params.name.length >= 20) {
                  label = params.name.split('~')[0] + '~ \n ' + params.name.split('~')[1]
                }
                return label
              }
            }
          }
          this.compare.lineChart.setOption(option, true)
          window.addEventListener('resize', () => {
            this.compare.lineChart.resize()
          })
        })
      } else {
        if (this.compare.lineChart) {
          this.compare.lineChart.dispose()
          this.compare.lineChart = null
        }
      }
    }
  }
}
</script>

<style lang="scss">
.factory-line {
  background-color: #fff;
  padding: 20px;
  position: relative;
  .line-title {
    font-size: 16px;
    font-weight: bold;
  }
  .line-content {
    height: 200px;
  }
  .no-record {
    padding: 20px;
    text-align: center;
    img {
      margin-bottom: 10px;
    }
  }
  .el-dropdown {
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
  }
}
</style>
